<template>
  <Card>
    <Row type="flex" justify="space-between">
      <Col span="20">
        <DatePicker
          type="datetime"
          placeholder="Select date"
          format="yyyy-MM-dd HH:mm:ss"
          style="width: 200px"
        ></DatePicker>
      </Col>
      <Col span="2" align="right">
        <Button type="primary" @click="save">新增</Button>
      </Col>
    </Row>
    <Form :model="formItem" ref="formItem" :rules="ruleValidate" :label-width="100">
      <Table
        stripe
        :columns="columns"
        :loading="contentLoading"
        :data="currentList"
        style="margin-top:15px"
      >
        <template slot-scope="{ row, index }" slot="name">
          <FormItem label prop="editName" v-if="editIndex === index">
            <Input type="text" v-model="formItem.editName"/>
          </FormItem>
          <span v-else>{{ row.name }}</span>
        </template>

        <template slot-scope="{ row, index }" slot="age">
          <FormItem label prop="editAge" v-if="editIndex === index">
            <Input type="text" v-model="formItem.editAge"/>
          </FormItem>
          <span v-else>{{ row.age }}</span>
        </template>

        <template slot-scope="{ row, index }" slot="address">
          <FormItem label prop="editAddress" v-if="editIndex === index">
            <Input type="text" v-model="formItem.editAddress"/>
          </FormItem>
          <span v-else>{{ row.address }}</span>
        </template>

        <template slot-scope="{ row, index }" slot="action">
          <div v-if="editIndex === index">
            <Button @click="handleSave(index)" size="small" type="success">保存</Button>
            <Button @click="editIndex = -1" size="small">取消</Button>
          </div>
          <div v-else>
            <Button @click="handleEdit(row, index)" size="small" type="primary">修改</Button>
          </div>
        </template>
      </Table>
    </Form>
    <br>
    <Page
      :total="page.total"
      :current="page.current"
      :page-size="page.size"
      show-elevator
      show-sizer
      show-total
      :page-size-opts="[10, 20, 30, 40]"
      placement="top"
      @on-change="getData"
      @on-page-size-change="nowPageSize"
    ></Page>
  </Card>
</template>
<style>
.ivu-table-cell {
  overflow: inherit !important;
}
.ivu-form-item-content {
  margin-left: 0 !important;
}
.ivu-form-item-error-tip {
  z-index: 99999 !important;
}
.ivu-form-item {
  margin-bottom: 0 !important;
}
</style>

<script>
import { page_minins } from '@/utils/page_minins'
import { userList } from '@/api/sys/user'
export default {
  mixins: [page_minins],
  data () {
    return {
      ruleValidate: {
        editName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        editAge: [
          { required: true, message: '年龄不能为空', trigger: 'blur' }
        ],
        editAddress: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ]
      },
      columns: [
        {
          title: '姓名',
          slot: 'name'
        },
        {
          title: '年龄',
          slot: 'age'
        },
        {
          title: '地址',
          slot: 'address'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      editIndex: -1,
      formItem: {
        editName: '',
        editAge: '',
        editAddress: ''
      },

    }
  },
  mounted () {
    this.pageList(userList)
  },
  methods: {
    handleEdit (row, index) {
      let { name, age, address } = row
      this.formItem.editName = name
      this.formItem.editAge = age
      this.formItem.editAddress = address
      this.editIndex = index
    },
    handleSave (index) {
      this.$refs.formItem.validate((valid) => {
        if (valid) {
          let {editName, editAge, editAddress } = this.formItem
          this.currentList[index].name = editName
          this.currentList[index].age = editAge
          this.currentList[index].address = editAddress
          this.editIndex = -1
        }
      })

    }
  }
}
</script>